<template>
	<view class="phonegoin">
		<!-- 背景图 -->
		<image class="phonegoin_back" src="https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/daojia/common/theball.png"></image>
		<image class="phonegoin_ball" src="https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/daojia/common/ball.png"></image>
		<!-- 登录模块 -->
		<view class="modular">
			<input class="input_mobile" placeholder="请输入您的手机号码" maxlength="11" type="number" @input="Onmobile" placeholder-class="placeholderClass" />
			<!-- 验证码 -->
			<view class="verification_bos">
				<input class="input_captcha" @input="Oncaptcha" placeholder="请输入验证码" maxlength="6" type="number" placeholder-class="placeholderClass" />
				<view :class="verdisabled?'verification_a':'verification_b'" class="verification" @click='Onverification'>
					{{captchastring}}
				</view>
			</view>
			<!-- 登陆按钮 -->
			<button type="default" class="custom_class" @click='myRregisterb' :loading="loading_button">登 录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchastring: '获取验证码',
				verdisabled: true, //验证码判断
				mobile: '', //手机号码
				captcha: '', //验证码
				loading_button: false, //登录加载
				wxcode: '',
				openId: '',
			}
		},
		onShow: function() {
			var that = this
			wx.login({
				success: res => {
					this.$Http({
						url: 'getWechatOpenId',
						data: {
							code: res.code
						},
					}).then(res1 => {
						if (res1.code == 1) {
							that.openId = res1.data.openid
						}
					});
				}
			})
		},
		methods: {
			//手机号码
			Onmobile(e) {
				this.mobile = e.detail.value
			},
			//验证码
			Oncaptcha(e) {
				this.captcha = e.detail.value
			},
			//验证码倒计时
			Onverification: function() {
				var that = this;
				if (that.mobile == '') {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!(/^1[12345789]\d{9}$/.test(that.mobile)) || that.mobile.length != 11) {
					uni.showToast({
						title: '手机号码格式错误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.verdisabled) {
					return
				}
				var currentTime = 60;
				var interval = null;
				let basedata = {
					mobile: that.mobile
				}
				this.$Http({
					url: 'send_sms',
					data: basedata,
					show: true
				}).then(res1 => {
					if (res1.code == 1) {
						that.verdisabled = false
						interval = setInterval(function() {
							currentTime--;
							that.captchastring = currentTime + '秒'
							if (currentTime <= 0) {
								clearInterval(interval)
								that.captchastring = '重新发送'
								that.verdisabled = true
							}
						}, 1000)
					}
				});
			},
			//登录
			myRregisterb() {
				if (this.mobile == '') {
					wx.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.captcha == '') {
					wx.showToast({
						title: '验证码不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.loading_button = true
				let basedata = {
					mobile: this.mobile,
					code: this.captcha,
					openid: this.openId
				}
				this.$Http({
					url: 'login',
					data: basedata,
					type: 'POST',
					show: true
				}).then(res1 => {
					this.loading_button = false
					wx.setStorage({
						key: 'user',
						data: res1.data,
					})
					if (this.$store.state.url != '') {
						if (this.$store.state.url == 'pages/home/index' || this.$store.state.url ==
							'pagesA/info/index' || this.$store.state.url == 'pages/my/index') {
							uni.switchTab({
								url: '/' + this.$store.state.url,
							})
						} else {
							uni.redirectTo({
								url: '/' + this.$store.state.url,
							})
						}
						this.$store.commit('Onvuexurl', '')
					} else {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}

				});
			}
		}
	}
</script>

<style>
	.phonegoin {
		position: relative;
		width: 750rpx;
		display: flex;
		justify-content: center;
	}

	.phonegoin_back {
		width: 750rpx;
		height: 711rpx;
		position: absolute;
		left: 0;
		top: 100rpx;
	}

	.phonegoin_ball {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 431rpx;
		height: 375rpx;
	}

	.modular {
		position: absolute;
		top: 180rpx;
		width: 650rpx;
		height: 666rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(117, 117, 117, 0.2);
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 124rpx;
	}

	.input_mobile {
		width: 590rpx;
		height: 90rpx;
		background-color: #f7f7f7;
		border-radius: 45rpx;
		padding-left: 40rpx;
		font-size: 32rpx;
		margin-bottom: 32rpx;
	}

	.placeholderClass {
		font-size: 32rpx;
		color: #cccccc;
	}

	/* 验证码 */
	.verification_bos {
		width: 590rpx;
		height: 90rpx;
		background-color: #f7f7f7;
		border-radius: 45rpx;
		display: flex;
		margin-bottom: 80rpx;
	}

	.input_captcha {
		width: 365rpx;
		height: 90rpx;
		padding-left: 40rpx;
		border-radius: 45rpx 0rpx 0rpx 45rpx;
		font-size: 32rpx;
	}

	.verification {
		width: 225rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 0px 45rpx 45rpx 0px;
	}

	.verification_a {
		background-color: #6bcbb6;
	}

	.verification_b {
		background-color: #91d3c5;
	}

	.custom_class {
		width: 590rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #6bcbb6 !important;
		border-radius: 45px !important;
		color: #ffffff !important;
		font-size: 32rpx !important;
	}
</style>
